<template>
  <div class="background">
    <div class="background-mask">
      <el-container>
        <!-- 1. 顶部导航栏 - 采用玻璃拟态设计 -->
        <el-header class="Header">
          <div class="logo">
            <img src="../assets/logo.png" alt="" class="logoimg" />
            <h3 class="logotext">甲骨小文</h3>
             <div class="function-dropdown-container">
    <button class="function-toggle" @click="toggleFunctionMenu">
      <el-icon :size="20" style="margin-right: 5px">
         <Menu />
      </el-icon>
      <span>技能</span>
    </button>
    
    <transition name="el-zoom-in-top">
      <div v-show="isFunctionMenuVisible" class="function-dropdown-menu" @click.stop>
        <div class="function-dropdown-item" @click="handleFunctionClick('wordLineSearch')">
          <el-icon><Search /></el-icon>
          <span>字形检索</span>
        </div>
        <div class="function-dropdown-item" @click="handleFunctionClick('singleCharSearch')">
          <el-icon><ZoomIn /></el-icon>
          <span>单字检索</span>
        </div>
      </div>
    </transition>
  </div>
                <button class="history-toggle" @click="toggleHistory">
              <el-icon :size="20" style="margin-right: 5px">
                <Clock  />
              </el-icon>
              <span >历史记录</span>
            </button>
            
          </div>
          <div class="other">
            <button class="newdialogue" @click="newChat()">
              <el-icon :size="20" style="margin-right: 5px"><Plus /></el-icon>新建对话
            </button>
            
            <!-- 用户信息区域 - 已登录/未登录状态切换 -->
            <div class="user-profile">
              <template v-if="hasToken">
                <img :src="userAvatar" alt="用户头像" class="personpto" />
                <h3 class="username">{{ displayName }}</h3>
                <div class="dropdown-container">
                  <el-icon :size="22" @click.stop="toggleDropdown">
                    <Setting />
                  </el-icon>
                  <transition name="el-zoom-in-top">
                    <div v-show="dropdownVisible" class="dropdown-menu" @click.stop>
                      <div class="dropdown-item" @click="handlepersonifmation">
                        <el-icon><User /></el-icon>
                        <span>个人信息</span>
                      </div>
                      <div class="dropdown-item" @click="handleLogout">
                        <el-icon><SwitchButton /></el-icon>
                        <span>退出登录</span>
                      </div>
                    </div>
                  </transition>
                </div>
              </template>
              
              <!-- 未登录状态显示去登录按钮 -->
              <template v-else>
                <button class="login-btn" @click="handleGoLogin">
                  <el-icon :size="18" style="margin-right: 5px"><User /></el-icon>去登录
                </button>
              </template>
            </div>
          </div>
        </el-header>
        
        <el-container>
          <!-- 2. 左侧边栏 - 采用悬浮卡片设计 -->
                  <el-aside class="Aside" :class="{  'collapsed': isHistoryCollapsed }">
            <div class="history-container">
              <div class="history-title-header">
                <h2>历史记录</h2>
               <el-icon class="collapse-icon" @click="toggleHistory" :size="20">
                  <ArrowLeftBold v-if="!isHistoryCollapsed" />
                  <ArrowRightBold v-else />
                </el-icon>
              </div>
              
              <!-- 已登录状态显示历史记录 -->
              <div v-if="hasToken">
                <div v-if="hasHistory" class="history-content  ">
                  <div 
                    v-for="item in sortedHistory" 
                    :key="item.sessionId" 
                    class="history-item"
                    :class="{ 'active': activeHistoryId === item.sessionId }"
                    @click="selectHistory(item.sessionId)"
                  >
                    <div class="history-content-wrapper">
                      <h3 class="history-title">{{ item.title }}</h3>
                      <p class="history-time">{{ formatTime(item.createdAt) }}</p>
                    </div>
                    <el-icon 
                      class="delete-icon" 
                      :size="20" 
                      @click.stop="deleteHistory(item.sessionId)"
                    >
                      <Delete />
                    </el-icon>
                  </div>
                </div>
                <div v-else class="empty-history">
                  <el-empty description="暂无历史记录" />
                </div>
              </div>
              
              <!-- 未登录状态显示去登录按钮 -->
              <div v-else class="login-prompt">
                <button class="login-btn" @click="handleGoLogin">
                  <el-icon :size="18" style="margin-right: 5px"><User /></el-icon>登录查看历史记录
                </button>
              </div>
            </div>
          </el-aside>
          
          <!-- 3. 主内容区 - 采用无边框设计 -->
          <el-main class="Main">
            <div class="main-content">
              <router-view ref="questionAlRef"></router-view>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount ,nextTick, onBeforeMount ,watch} from 'vue'
import { useUserStore } from '@/stores'
import { deleteChatSession } from '@/api/Delete_historical'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { useQuestionStore } from '@/stores'
import { Plus, Setting, User, SwitchButton, Refresh, Delete,Menu  } from '@element-plus/icons-vue'
import { historicalrecor  } from '@/api/Historical_record_question'
const router = useRouter()
const userStore = useUserStore()
const activeHistoryId = ref(null)
const dropdownVisible = ref(false)
const userquestion = useQuestionStore()
// 功能菜单相关变量
const isFunctionMenuVisible = ref(false)

// 切换功能菜单显示/隐藏
const toggleFunctionMenu = () => {
  isFunctionMenuVisible.value = !isFunctionMenuVisible.value
}

// 处理功能菜单点击事件
const handleFunctionClick = (functionType) => {
  isFunctionMenuVisible.value = false // 点击后关闭菜单
if(userquestion.isGenerating)
{
  ElMessage({
    message: '请等待上一次回答完成',
    type: 'warning',
  })
  return
}
  switch(functionType) {
    case 'wordLineSearch':
     router.push('/dictCharSearch'); 
      break
    case 'singleCharSearch':
       router.push('/image-cropping'); 
      break
  }
}

const defaultAvatar =  'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
// 新增：判断是否有token
const hasToken = computed(() => !!userStore.token)
const userAvatar = computed(() => defaultAvatar)
const displayName = computed(() => userStore.username || '甲骨文爱好者')
const hasHistory = computed(() => {
  return (userStore.chatHistory || []).length > 0
})
//拉取左边历史记录
const formatTime = (isoString) => {
  const date = new Date(isoString)
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    hour12: false
  }).replace(/\//g, '-') // 将斜杠替换为横杠
}
const chatHistory = ref([]) // 初始化响应式数据
// 按更新时间降序排序
const sortedHistory = computed(() => {
  return [...userStore.chatHistory].sort((a, b) => 
    new Date(b.updatedAt) - new Date(a.updatedAt)
)})
onBeforeMount (async () => {
  if (userStore.token) {
  try {
        const res = await historicalrecor(); 
        userStore.addChatMessage(res);
    } catch (error) {
      console.error("Token 无效或请求失败:", error);
    }
}
})

//判断是否点击历史记录
const questionAlRef = ref(null);
const selectHistory = (sessionId) => {

  if(userquestion.isGenerating)
{
  ElMessage({
    message: '请等待上一次回答完成',
    type: 'warning',
  })
  return
}

  activeHistoryId.value = sessionId;
  userStore.updatesessionId(sessionId);
  router.push(`/questionAi`)
};
const checkSessionId = () => {

  if (userStore.sessionId) {
    activeHistoryId.value=userStore.sessionId
  }
}
watch(
  () => userStore.sessionId,
  (newVal, oldVal) => {
    if(newVal!=''){
      checkSessionId()
    }
    
  }
);
watch(
  () => userStore.chatHistory,
  (newVal, oldVal) => {
    if(newVal.length===0){
     userStore.updatesessionId('')
    }
  }
);
// 响应式检测
const checkScreenSize = () => {
  isHistoryCollapsed.value = window.innerWidth <= 992
}

const newChat = () => {
  if(userquestion.isGenerating)
{
  ElMessage({
    message: '请等待上一次回答完成',
    type: 'warning',
  })
  return
}
  userStore.updatesessionId('')
  activeHistoryId.value=''
  router.push('/')
}

const handleAfterRefreshSession = async () => {
  if (userStore.sessionId) {
    router.push(`/questionAi`)
  }
}

onMounted(() => {
  checkScreenSize()
  checkSessionId()
  handleAfterRefreshSession()
  window.addEventListener('resize', checkScreenSize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', checkScreenSize)
})

// 显示/隐藏下拉菜单
const toggleDropdown = () => {
  dropdownVisible.value = !dropdownVisible.value
}

// 关闭下拉菜单
const closeDropdown = () => {
  dropdownVisible.value = false
}


const handlepersonifmation = () => {
  if(userquestion.isGenerating)
{
  ElMessage({
    message: '请等待上一次回答完成',
    type: 'warning',
  })
  return
}
  router.push('/personInformation')
  closeDropdown()
}

// 退出登录
const handleLogout = () => {
if(userquestion.isGenerating)
{
  ElMessage({
    message: '请等待上一次回答完成',
    type: 'warning',
  })
  return
}

  ElMessageBox
   .confirm('确定要退出登录吗?', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      userStore.logout()
      localStorage.removeItem('token')
      router.push({
        name: 'Login',
        query: { fromLogout: 'true' }  // 改为使用 query 参数
      })
      ElMessage.success('退出成功')
    }).catch(() => {
      ElMessage.info('已取消退出')
    })
  closeDropdown()
}
// 去登录
const handleGoLogin = () => {
  router.push({
    name: 'Login'
  })
}
const deleteHistory = async (sessionId) => {
  try {
    // 第一步：显示确认对话框
    await ElMessageBox.confirm(
      '确定删除对话?<br>删除后，聊天记录将不可恢复。',
      '提示',
      {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: 'warning',
        dangerouslyUseHTMLString: true
      }
    );

    // 第二步：调用API删除
    const response = await deleteChatSession(sessionId);
    
    // 第三步：处理本地数据
    userStore.addChatMessage (userStore.chatHistory.filter(item => item.sessionId !== sessionId));
    
    if (activeHistoryId.value === sessionId) {
         userquestion.isGenerating= false
      userStore.updatesessionId('');
      activeHistoryId.value = null;
      // 可选：跳转到新对话或默认页面
       router.push('/common-ai')
    }

    // 第四步：显示成功反馈
    ElMessage({
      type: 'success',
      message:'删除成功!',
      duration: 2000
    });

  } catch (error) {
    // 区分用户取消和真实错误
    if (error !== 'cancel') {
      console.error('[API] 删除会话失败:', error);
      ElMessage({
        type: 'error',
        message: error.response?.data?.message || '删除失败，请稍后重试',
        duration: 3000
      });
    } else {
      // 用户点击取消的反馈
      ElMessage({
        type: 'info',
        message: '已取消删除',
        duration: 1500
      });
    }
  }
};


// 新增响应式变量
const isHistoryCollapsed = ref(false)

// 新增切换历史记录方法
const toggleHistory = () => {
  isHistoryCollapsed.value = !isHistoryCollapsed.value
}

</script>

<style scoped lang="scss">
/* 全局变量 */
$primary-color: #8B4513;
$secondary-color: #d4a373;
$light-bg: rgba(245, 240, 230, 0.95);
$glass-bg: rgba(255, 253, 250, 0.75);
$text-color: #5a3e2b;
$header-height: 4rem; 



/* 基础设置 */
:root {
  font-size: 16px;
}


/* 功能按钮及菜单样式 */
.function-dropdown-container {
  position: relative;
  display: inline-block;
  margin-left: 1rem;
}

.function-toggle {
  background: rgba(255, 255, 255, 0.6);
  color: $primary-color;
  border: none;
  padding: 0 1rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(139, 69, 19, 0.08);
  
  &:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
  }
  
  .el-icon {
    transition: all 0.3s ease;
  }
}

.function-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1002;
  margin-top: 0.5rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-width: 10rem;
  overflow: hidden;
  border: 1px solid rgba(139, 69, 19, 0.1);
}

.function-dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
  color: $text-color;
  
  &:hover {
    background-color: rgba(139, 69, 19, 0.05);
    color: $primary-color;
  }
  
  .el-icon {
    margin-right: 0.5rem;
    font-size: 1rem;
  }
  
  span {
    font-size: 0.875rem;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .function-toggle {
    span {
      display: none;
    }
    
    margin-left: 0.5rem;
    padding: 0 0.75rem;
  }
}

/* 导入所需图标（需在script中引入） */
// 注意：需要在script部分添加图标导入
// import { Grid, Search, Find } from '@element-plus/icons-vue'


/* 全局背景与容器 */
.background {
  background: linear-gradient(135deg, #f5f0e6 0%, #e8d9c5 100%), 
              url('../assets/bjt.png') center/cover no-repeat;
  min-height: 100vh;
  width: 100vw;
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
  }
}

.background-mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  min-width: 320px;
}

/* 1. 顶部导航栏 */
.Header {
  height: $header-height;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5rem;
  background: $glass-bg;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(139, 69, 19, 0.1);
  box-shadow: 0 4px 20px -10px rgba(139, 69, 19, 0.2);
  position: relative;
  z-index: 100;
  flex-shrink: 0;
  
  &::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(to bottom, rgba(139, 69, 19, 0.1), transparent);
  }
}

.logo {
  display: flex;
  align-items: center;
  padding: 0.5rem 0.75rem;
  border-radius: 0.6rem;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 10px rgba(139, 69, 19, 0.05);
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(139, 69, 19, 0.1);
  }
}

.logoimg {
  width: 2.5rem;
  height: 2.5rem;
  min-width: 2.5rem;
  filter: drop-shadow(0 2px 4px rgba(139, 69, 19, 0.2));
}

.logotext {
  font-size: 1.25rem;
  color: $primary-color;
  margin-left: 0.5rem;
  font-weight: 600;
  letter-spacing: 1px;
  background: linear-gradient(to right, #8B4513, #d4a373);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  white-space: nowrap;
}

.other {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.newdialogue {
  background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
  color: white;
  border: none;
  padding: 0 1rem;
  height: 2.5rem;
  min-height: 2.5rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  white-space: nowrap;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4);
  }
  
  &:active {
    transform: translateY(0);
  }
}

/* 登录按钮样式 */
.login-btn {
  background: linear-gradient(135deg, $primary-color 0%, $secondary-color 100%);
  color: white;
  border: none;
  padding: 0 1rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(139, 69, 19, 0.3);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  white-space: nowrap;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(139, 69, 19, 0.4);
  }
  
  &:active {
    transform: translateY(0);
  }
}

.user-profile {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.25rem 0.75rem;
  border-radius: 1.5rem;
  background: rgba(255, 255, 255, 0.6);
  box-shadow: 0 2px 8px rgba(139, 69, 19, 0.08);
  transition: all 0.3s ease;
  flex-shrink: 0;
  
  &:hover {
    background: rgba(255, 255, 255, 0.8);
  }
}

.personpto {
  width: 2rem;
  height: 2rem;
  min-width: 2rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 5px rgba(139, 69, 19, 0.2);
  transition: all 0.3s ease;
  
  &:hover {
    transform: scale(1.1);
  }
}

.username {
  font-size: 0.875rem;
  color: $text-color;
  font-weight: 500;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 7rem;
}

.dropdown-container {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 1001;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 1002;
  margin-top: 0.5rem;
  background: white;
  border-radius: 0.5rem;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  min-width: 10rem;
  overflow: hidden;
  border: 1px solid rgba(139, 69, 19, 0.1);
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: all 0.2s;
  color: $text-color;
  
  &:hover {
    background-color: rgba(139, 69, 19, 0.05);
    color: $primary-color;
  }
  
  .el-icon {
    margin-right: 0.5rem;
    font-size: 1rem;
  }
  
  span {
    font-size: 0.875rem;
  }
}
.el-aside {
  overflow: visible !important; 
}



.history-toggle {
  background: rgba(255, 255, 255, 0.6);
  color: $primary-color;
  border: none;
  padding: 0 1rem;
  height: 2.5rem;
  border-radius: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 500;
  margin-left: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(139, 69, 19, 0.08);
  
  &:hover {
    background: rgba(255, 255, 255, 0.8);
    transform: translateY(-1px);
  }
  
  .el-icon {
    transition: all 0.3s ease;
  }
}



/* 修改收起图标样式 */
.collapse-icon {
  color: rgba(139, 69, 19, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
  padding: 0.25rem;
  border-radius: 50%;
  
  &:hover {
    color: $primary-color;
    background: rgba(139, 69, 19, 0.1);
    transform: scale(1.1);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .history-toggle {
    span {
      display: none;
    }
    
    margin-left: 0.5rem;
    padding: 0 0.75rem;
  }
  
  .Aside.collapsed {
    display: none;
  }
}

/* 2. 左侧边栏 */
.Aside {
  width: 15rem;
  height: calc(100vh - #{$header-height});
  padding: 0;
  position: relative;
  flex-shrink: 0;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-left: 15px;
  margin-right: 15px;

transition: all 0.3s ease;
  
  &.collapsed {
    width: 0 !important;
    margin-left: 0;
    margin-right: 0;
    overflow: hidden;
    
    .history-container {
      opacity: 0;
      pointer-events: none;
    }
  }

  .history-container {
    margin-top: 10px;
    width: 100%;
    position: absolute;
    height: 90%;
    box-sizing: border-box; 
    padding: 1rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto; 
    background: $glass-bg;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0.875rem;
    box-shadow: 0 8px 32px rgba(139, 69, 19, 0.1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(139, 69, 19, 0.08);
  }

 .history-content {
    min-height: 0; // 关键！
    overflow-y: auto; // 确保可滚动
    padding: 0 0.5rem; /* 调整内边距 */
    box-sizing: border-box;
 
  }


}

.history-title-header {
     
   flex: 0 0 auto; // 固定高度
  padding-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(139, 69, 19, 0.05);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));
  flex-shrink: 0;
  
  h2 {
    margin: 0;
    font-size: 1rem;
    color: $primary-color;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
  }
}


.history-item {
  padding: 0.65rem 1rem;
 margin: 0 0 0.75rem; /* 调整外边距，移除左右margin */
  border-radius: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  margin-bottom: 3px;
  border: 1px solid rgba(139, 69, 19, 0.08);
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    background: $primary-color;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.3s ease;
  }
  
  &:hover {
    background: rgba(139, 69, 19, 0.05);
    transform: translateX(5px);
    
    &::before {
      transform: scaleY(1);
    }
    
    .delete-icon {
      opacity: 1;
      transform: translateX(0);
    }
  }
  
  &.active {
    background: linear-gradient(to right, rgba(139, 69, 19, 0.1), rgba(139, 69, 19, 0.05));
    box-shadow: inset 15px 0 0 $primary-color;
    
    .history-title {
      color: $primary-color;
      font-weight: 500;
    }
    
    .history-time {
      color: $primary-color;
    }
  }
}

.refresh-icon {
  color: rgba(139, 69, 19, 0.6);
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    color: $primary-color;
    transform: rotate(180deg);
  }
}

/* 登录提示样式 */
.login-prompt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}


.history-content-wrapper {
  flex: 1;
  overflow: hidden;
  min-width: 0;
}

.history-title {
  font-size: 0.8125rem;
  color: $text-color;
  margin: 0 0 0.2rem 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  transition: all 0.2s ease;
}

.history-time {
  font-size: 0.6875rem;
  color: rgba(139, 69, 19, 0.6);
  margin: 0;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.delete-icon {
  opacity: 0;
  color: rgba(139, 69, 19, 0.6);
  transform: translateX(10px);
  transition: all 0.3s ease;
  flex-shrink: 0;
  
  &:hover {
    color: #e74c3c;
    transform: scale(1.2) translateX(0);
  }
}

.empty-history {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: rgba(139, 69, 19, 0.5);
  flex: 1;
}

/* 3. 主内容区 */
.Main {
  padding: 0;
  background: $light-bg;
  position: relative;
  overflow: hidden;
  flex: 1;
  min-width: 0;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, rgba(255,255,255,0) 100%);
    pointer-events: none;
  }
}

.main-content {
  position: absolute;
  top: 0.5rem;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  border-radius: 0.75rem;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(139, 69, 19, 0.05);
}

/* 滚动条美化 */
.history-content::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.history-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.6) 0%, rgba(212, 163, 115, 0.8) 100%);
  border-radius: 4px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: all 0.3s ease;
  
  &:hover {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.8) 0%, rgba(212, 163, 115, 1) 100%);
  }
  
  &:active {
    background: $primary-color;
  }
}

.history-content::-webkit-scrollbar-track {
  background-color: rgba(245, 240, 230, 0.5);
  border-radius: 4px;
  margin: 4px 0;
  
  &:hover {
    background-color: rgba(245, 240, 230, 0.7);
  }
}

.main-content::-webkit-scrollbar {
  width: 8px;
}

.main-content::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.5) 0%, rgba(212, 163, 115, 0.7) 100%);
  border-radius: 4px;
  border: 2px solid rgba(245, 240, 230, 0.5);
  
  &:hover {
    background: linear-gradient(135deg, rgba(139, 69, 19, 0.7) 0%, rgba(212, 163, 115, 0.9) 100%);
  }
}

.main-content::-webkit-scrollbar-track {
  background-color: rgba(245, 240, 230, 0.3);
  border-radius: 4px;
}

.history-content, .main-content {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 69, 19, 0.6) rgba(245, 240, 230, 0.3);
}




@media (min-width: 2300px)
  {
  /* 大屏幕显示器优化 */
  .Aside {
    width: 26rem;

  }
  .history-content
  {
    height: 850px;
  }
  
}

@media (min-width: 2000px) and (max-width: 2300px) 
  {
  /* 大屏幕显示器优化 */
  .Aside {
    width: 24rem;

  }
  .history-content
  {
    height: 760px;
  }
  
}

/* 响应式设计 - 针对不同屏幕尺寸优化 */
@media (min-width: 1920px)and (max-width: 2000px)  {
  /* 大屏幕显示器优化 */
  .Aside {
    width: 22rem;

  }
  .history-content
  {
    height: 700px;
  }
  
  .history-title {
    font-size: 0.9375rem;
  }
  
  .history-time {
    font-size: 0.75rem;
  }
}

@media (min-width: 1751px) and (max-width: 1919px) 
  {
  /* 大屏幕显示器优化 */
  .Aside {
    width: 19.5rem;

  }
  .history-content
  {
    height: 650px;
  }
  
}

@media (min-width: 1601px) and (max-width: 1750px) 
  {
  /* 大屏幕显示器优化 */
  .Aside {
    width: 18rem;

  }
  .history-content
  {
    height: 600px;
  }
  
}


@media (max-width: 1600px) {
  /* 标准桌面显示器 */
  .Aside {
    width: 16rem;
  }
   .history-content
  {
    height: 540px;
  }
}

@media (max-width: 1440px) {
  /* 小尺寸桌面显示器 */
  .Aside {
    width: 15rem;
  }
   .history-content
  {
    height: 480px;
  }
}

@media (max-width: 1280px) {
  /* 笔记本屏幕 */
  .Aside {
    width: 13rem;
  }
   .history-content
  {
    height: 400px;
  }
  .logo {
    padding: 0.4rem;
    
    .logotext {
      font-size: 1.1rem;
      margin-left: 0.4rem;
    }
  }
  
  .newdialogue, .login-btn {
    padding: 0 0.875rem;
    height: 2.25rem;
    font-size: 0.8125rem;
  }
  
  .user-profile {
    padding: 0.2rem 0.625rem;
    
    .username {
      max-width: 5rem;
    }
  }
}

@media (max-width: 992px) {
  /* 平板横屏和小笔记本 */
  .Header {
    padding: 0 0.875rem;
    height: 3.5rem;
  }
   .history-content
  {
    height: 400px;
  }
  .logoimg {
    width: 2.25rem;
    height: 2.25rem;
  }
  
  .logotext {
    font-size: 1rem;
  }
  
  .other {
    gap: 0.625rem;
  }
  
  .Aside {
    width: 12rem;
  }
  
  .history-title-header h2 {
    font-size: 0.9375rem;
  }
}

@media (max-width: 768px) {
  /* 平板竖屏 */
  .el-container {
    flex-direction: column;
  }
  
  .Aside {
    width: 100%;
    height: auto;
    max-height: 18rem;
    
    .history-container {
      position: static;
      margin: 0.5rem;
      top: auto;
      left: auto;
      right: auto;
      bottom: auto;
    }
  }
  
  .Main {
    height: calc(100vh - #{$header-height} - 18rem);
  }
}

@media (max-width: 576px) {
  /* 手机横屏 */
  .logo {
    .logotext {
      display: none;
    }
  }
  
  .user-profile {
    .username {
      display: none;
    }
  }
  
  .login-btn {
    padding: 0 0.75rem;
    font-size: 0.8125rem;
  }
  
  .newdialogue {
    span {
      display: none;
    }
    
    .el-icon {
      margin-right: 0;
    }
  }
}

@media (max-width: 480px) {
  /* 手机竖屏 */
  .Header {
    padding: 0 0.5rem;
  }
  
  .logo {
    padding: 0.3rem;
  }
  
  .other {
    gap: 0.5rem;
  }
  
  .user-profile {
    padding: 0.15rem 0.5rem;
  }
  
  .login-btn {
    padding: 0 0.5rem;
  }
}

.el-container {
  min-height: 100vh;
  overflow: hidden;
}

.el-aside, .el-main {
  overflow: hidden;
}
</style>